export class Tooltip {


    popoverDom = null//Tooltip元素
    constructor() {
        document.body.addEventListener("mousemove", this.#tooltipHoverHandle.bind(this))
    }
    #tooltipHoverHandle(e) {//弹框hover处理
        const tooltip = e.target.getAttribute("tooltip-popover")
        if (tooltip === "true") {
            this.#createPopover(e)
        } else {
            this.#closePopover()
        }
    }
    #createPopover(e) {//创建popover
        this.popoverDom = document.getElementsByClassName("tooltip-popover-container")[0]
        let { x, y, offsetLeft, offsetTop,offsetWidth } = e.target//元素距离页面的上，左边距
        if (x == undefined || y == undefined) {
            x = offsetLeft
            y = offsetTop
        }
        const yGrid = 54//元素高度间隔,用于对齐元素
        const text = e.target.getAttribute("tooltip-text")
        if (this.popoverDom) {
            this.popoverDom.innerText = text
        } else {//没有就创建
            this.popoverDom = document.createElement("div")
            this.popoverDom.setAttribute("class", "tooltip-popover-container")
            this.popoverDom.innerText = text
            document.body.appendChild(this.popoverDom)
        }
        this.popoverDom.style.display = 'block'
        //让弹框对齐元素
        this.popoverDom.style.top = y - yGrid + 'px'
        this.popoverDom.style.left = x - this.popoverDom.offsetWidth / 2 + offsetWidth / 2 + 'px'
        
    }
    #closePopover() {//关闭popover
        if (this.popoverDom) {
            this.popoverDom.style.display = 'none'
        }
    }
}